<template>
<div style="display: block">
        <el-row>
            <el-col :span="1" style="text-align:center; text-align: left;   display:table;">
                <p class="md-text1">硬件名字:</p>
            </el-col>
            <el-col :span="3">
                <el-input placeholder="硬件名字" v-model="title"></el-input>
            </el-col>
        </el-row>
        <el-row :span = "3">
            <el-col :span="1" style="text-align:center; text-align: left; display:table;">
                <p class="md-text1">简介:</p>
            </el-col>
            <el-col :span="10">
                <el-input  type="textarea"
                           :rows="2"
                           placeholder="请输入内容"
                           v-model="desc"></el-input>
            </el-col>
        </el-row>
    <el-row :span = "3" style=" margin-top:10px;">
        <el-col :span="1" style="text-align: left; display:table;">
            <p class="md-text1">详细参数:</p>
        </el-col>
        <el-col :span="10">
            <el-input  type="textarea"
                       :rows="10"
                       placeholder="请输入内容"
                       v-model="content"></el-input>
        </el-col>
    </el-row>
    <el-row :span = "3" style=" margin-top:10px;">
        <el-col :span="2" style=" text-align: left; display:table;">
            <p class="md-text1">购入时间:</p>
        </el-col>
        <el-col :span="1" style="margin-top: 5px;">
            <el-date-picker
                    v-model="buy_date"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>
        </el-col>
    </el-row>
        <el-row :span = "3" style="margin-top: 10px;">
            <el-col :span="2" style="text-align: left; display:table;">
                <p class="md-text1">图片上传:</p>
            </el-col>
        </el-row>
        <el-row :span = "3" style="margin-top:  10px;margin-left: 10px; text-align: left;">
            <el-col :span="4" style="text-align:center;  display:table;">
                <el-upload
                        class="upload-demo"
                        action="http://127.0.0.1:4596/api/image_upload"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        :on-success = "handleResponse"
                        list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件</div>
                </el-upload>
            </el-col>
        </el-row>
        <el-row :span = "3" style="margin-top:  10px;margin-left: 10px; text-align: left;">
            <el-button type="primary"  @click="onSubmit">新增</el-button>
        </el-row>
</div>
</template>

<script>
    import Message from "element-ui/lib/message";
    import axios from "@/api/ajax.js";
    export default {
        name: "hardwareAdd",
        components: {
        },
        data: () => {
            return {
                buy_date:"",
                baseurl:"",
                title:"",
                desc:"",
                content:"",
                fileList: [
                ],
                responsefile:[]
            };
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleResponse(response, file, fileList){
                let fileUrl = this.baseurl + "/" + response.url;
                console.log(fileUrl)
                this.responsefile.push(fileUrl)
                //this.fileList.push({name: "image", url: fileUrl})
            },
            onSubmit(){
                if (this.title == ""){
                    Message.error("硬件名字为空");
                    return
                }
                if(this.desc == ""){
                    Message.error("简述不能为空");
                    return
                }
                if(this.content == ""){
                    Message.error("内容不能为空");
                    return
                }
                if(this.buy_date == ""){
                    Message.error("购入时间不能为空");
                    return
                }
                let pic = "";
                let first = 0;
                this.responsefile.forEach(v => {
                        pic = pic + v +",";
                })
                axios.post("hardware",{
                    name:this.title,
                    buy_date:this.buy_date,
                    desc:this.desc,
                    doc:this.content,
                    pic:pic,
                }).then(response=> {
                        console.log(response);
                        if (response.data.Status === 0)
                        {
                            Message.success("添加成功");
                        }
                    }
                ).catch(reason => {
                    Message.error("网络错误:" + reason);
                });
            }
        },
        mounted() {
            this.baseurl = process.env.NODE_ENV === 'development'?'http://127.0.0.1:4596/api/image_download':'https://www.testingcloud.club/sapi/api/image_upload';
            console.log(this.baseurl)
        }
    }
</script>

<style scoped>

.container {
    width: 100%;
}
.md-text {
    font-size: 12px;
    width: 100%;
}
.md-body {
    width: 100%;
    margin-left: 20px;
}
.md-text1 {
    font-size: 15px;
    margin-top: 10px;
}
.mavonEditor {
    width: 100%;
    height: 800px;
}
</style>
